<template>
    <div>
            <div class="LocationWeather">
                <div>
                    <ul class="left">
                        <li><span>相对温度:</span> <b>{{realTimeWeather.temperature}} °C</b> </li>
                        <li><span>相对湿度:</span> <b>{{realTimeWeather.humidity}} %</b></li>
                        <li><span>风速:</span> <b>{{realTimeWeather.windpower}} m/s</b> </li>
                        <li><span>风向:</span> <b>{{realTimeWeather.winddirection}}</b></li>
                    </ul>
                </div>
                <div class="Location">
                    <div class="LocationBgc">
                         <div >
                             <div >
                                 <img src="../../assets/image/qx/positon.png" alt="">
                            </div>
                             <div>
                                 <span class="region">{{realTimeWeather.city}}</span>
                                 <span>{{realTimeWeather.weather}}</span>
                             </div>
                        </div>
                    </div>
                </div>

            </div>
    </div>
</template>
<script>
export default {
    props:{
        realTimeWeather:{
            type:Object,
            default:{}
        }
    },
    data(){
        return{

        }
    },
    mounted(){

    },
    methods:{

    }

}
</script>
<style  scoped>
.LocationWeather {
    width: 533px;
    height: 519px;
    border:1px solid #37ccc2;
    display: flex;
    padding: 30px;
    box-sizing: border-box;
}
.LocationWeather>div {
    width: 50%;
}
.left li {
    height: 50px;
    line-height: 50px;
}
.left span {
    color:#fff;
    font-weight: 500;
    font-size: 22px;
}
.left span::before{
    content:"";
    display: inline-block;
    width: 5px;
    height: 5px;
    border: 4px solid #00e8d8;
    border-radius: 50%;
    margin-right: 10px;
}
b{
    color:#2dc6dd;
    font-size: 20px;
    font-weight:normal;
    font-weight: 500;
    margin-left: 10px;
}
.Location{
    width: 200px;
    height: 200px;
}
.LocationBgc {
    width: 200px;
    height: 200px;
    margin: auto;
    background: url("../../assets/image/qx/1577774465.png") no-repeat;
    animation:   myrotate 20s infinite linear;
}
.LocationBgc > div {
    width: 200px;
    height: 200px;
    color:#fff;
    text-align: center;
     font-size:18px;
    animation:   myrotateLi 20s infinite linear;
   
}
.region {
    color: #00e8d8;
    
}
img {
    margin-top: 50px;
    margin-bottom: 15px;
}

@keyframes myrotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes myrotateLi {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
</style>